<template>
	<view class="suggestions">
		<common-navbar title="投诉建议" />
		<view class="select-suggestions-type-container">
			<view class="title">
				您遇到了哪方面的问题？
			</view>
			<view class="tag-list">
				<view class="tag-item" v-for="item,index in suggestionTypeList" :key="index" @click="onTagClick(item)"
					:class="{'selected':item.is_selected}">
					{{item.suggestion_type}}
				</view>
			</view>
		</view>
		<view class="suggestions-input-container">
			<view class="title">
				请描述您遇到的问题
			</view>
			<view class="suggestions-input">
				<imageTextArea v-model="content" :autoHeight="true" :maxlength="500" ref="imageTextArea"
					@input="onInput" />
			</view>
		</view>
		<button class="submit-btn" @click="submit">提交</button>
	</view>
</template>

<script>
	import imageTextArea from "../../components/image-text-area/imageTextArea.vue";
	export default {
		data() {
			return {
				content: '',
				suggestionTypeList: [{
					suggestion_type: '法务顾问不满意',
					is_selected: false,
				}, {
					suggestion_type: '律师服务不满意',
					is_selected: false,
				}, {
					suggestion_type: '需要技术支持',
					is_selected: false,
				}, {
					suggestion_type: '其他',
					is_selected: false,
				}]
			}
		},
		components: {
			imageTextArea
		},
		methods: {
			async submit() {
				let fireList = this.$refs.imageTextArea.$refs.upload.lists;
				if (!this.content.length) {
					return this.$showToast('请输入内容')
				} else if (fireList.some(item => item.progress < 100 && !iten.response)) {
					return this.$showToast('有图片正在上传')
				} else if (fireList.some(item => item.response.status_code != 200)) {
					return this.$showToast('图片上传失败,请上传格式为jpg/png/jpeg图片')
				}
				await this.$u.post(this.$restUrl.submitSuggestion, {
					content: this.content,
					img: fireList.map(item => item.response.data.file_id + '').join(','),
				})
				uni.navigateBack({
					success: () => {
						this.$showToast('提交成功,感谢您的反馈')
					}
				})
			},
			onTagClick(tag) {
				this.$set(tag, 'is_selected', !tag.is_selected);
				if (tag.is_selected) {
					this.$refs.imageTextArea.defaultVal += tag.suggestion_type;
				} else {
					this.$refs.imageTextArea.defaultVal = this.$refs.imageTextArea.defaultVal.replace(tag.suggestion_type,
						'');
				}
				this.content = this.$refs.imageTextArea.defaultVal;
				console.log(this.$refs.imageTextArea.defaultVal)
			},
			onInput(e) {
				this.suggestionTypeList.forEach(item => {
					this.$set(item, 'is_selected', this.content.indexOf(item.suggestion_type) != -1);
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./suggestions.scss";
</style>
